
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { BookOpen, Brain, Users, ArrowRight } from "lucide-react";

export const RecommendedCommunities = () => {
  const subjectCommunities = [
    { name: "STEM Educators Network", members: 342, description: "Innovative STEM teaching methods and interdisciplinary approaches", category: "Science & Math" },
    { name: "Language Arts Collective", members: 198, description: "Creative writing, reading comprehension, and literacy strategies", category: "English & Literature" },
    { name: "Social Studies Hub", members: 156, description: "Engaging students with history, geography, and civic education", category: "History & Civics" }
  ];

  const pedagogicalCircles = [
    { name: "Assessment Circle", members: 234, description: "Innovative assessment strategies and feedback mechanisms", category: "Assessment" },
    { name: "AI Teaching Studio", members: 189, description: "Integrating AI tools effectively in educational practice", category: "EdTech" },
    { name: "Project-Based Learning", members: 167, description: "Real-world projects that engage and challenge students", category: "Methodology" }
  ];

  const professionalCollabs = [
    { name: "Cross-Curricular Design", members: 156, description: "Creating interdisciplinary learning experiences", category: "Curriculum" },
    { name: "Research & Practice", members: 134, description: "Educational research translation and implementation", category: "Research" },
    { name: "Mentorship Hub", members: 198, description: "Supporting new educators and career development", category: "Professional Growth" }
  ];

  const CommunityCard = ({ community, icon: Icon, iconColor }: { community: any, icon: any, iconColor: string }) => (
    <div className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors cursor-pointer">
      <div className="flex items-center space-x-4">
        <Avatar>
          <AvatarFallback>
            <Icon className="w-4 h-4" />
          </AvatarFallback>
        </Avatar>
        <div>
          <h4 className="font-semibold text-gray-900 dark:text-gray-100">{community.name}</h4>
          <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">{community.description}</p>
          <p className="text-xs text-gray-400">
            {community.members} members • {community.category}
          </p>
        </div>
      </div>
      <Button size="sm" variant="outline">
        <Users className="w-4 h-4 mr-1" />
        Join
      </Button>
    </div>
  );

  return (
    <Card className="bg-white dark:bg-gray-800 shadow-sm border">
      <CardHeader>
        <CardTitle className="text-lg font-semibold flex items-center gap-2">
          <Users className="w-5 h-5 text-blue-600" />
          Recommended Communities
        </CardTitle>
        <p className="text-sm text-gray-600 dark:text-gray-400">
          Join specialized groups tailored to your teaching interests and expertise
        </p>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="subject-teaching" className="w-full">
          <TabsList className="grid w-full grid-cols-3 mb-6">
            <TabsTrigger value="subject-teaching" className="text-xs">📘 Subject Teaching</TabsTrigger>
            <TabsTrigger value="pedagogical" className="text-xs">🧑‍🏫 Pedagogical</TabsTrigger>
            <TabsTrigger value="professional" className="text-xs">🤝 Professional</TabsTrigger>
          </TabsList>

          <TabsContent value="subject-teaching">
            <div className="space-y-4 mb-6">
              {subjectCommunities.map((community, index) => (
                <CommunityCard 
                  key={index} 
                  community={community} 
                  icon={BookOpen} 
                  iconColor="text-blue-600" 
                />
              ))}
            </div>
          </TabsContent>

          <TabsContent value="pedagogical">
            <div className="space-y-4 mb-6">
              {pedagogicalCircles.map((community, index) => (
                <CommunityCard 
                  key={index} 
                  community={community} 
                  icon={Brain} 
                  iconColor="text-purple-600" 
                />
              ))}
            </div>
          </TabsContent>

          <TabsContent value="professional">
            <div className="space-y-4 mb-6">
              {professionalCollabs.map((community, index) => (
                <CommunityCard 
                  key={index} 
                  community={community} 
                  icon={Users} 
                  iconColor="text-green-600" 
                />
              ))}
            </div>
          </TabsContent>
        </Tabs>

        <div className="text-center">
          <Button variant="ghost" className="text-blue-600 hover:text-blue-700">
            Explore All Communities <ArrowRight className="w-4 h-4 ml-1" />
          </Button>
        </div>
      </CardContent>
    </Card>
  );
};
